<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>医院排队叫号系统</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .department-card {
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .department-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        .queue-info {
            font-size: 0.9em;
            color: #666;
        }
        .status-indicator {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 5px;
        }
        .status-waiting { background-color: #ffc107; }
        .status-calling { background-color: #28a745; }
        .status-completed { background-color: #6c757d; }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="#">医院排队叫号系统</a>
            <div class="collapse navbar-collapse">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="doctor/index.html">医生工作台</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container mt-4">
        <div class="row">
            <div class="col-md-8">
                <!-- 排队表单 -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">患者排队</h5>
                    </div>
                    <div class="card-body">
                        <form id="queueForm">
                            <div class="mb-3">
                                <label for="patientName" class="form-label">患者姓名</label>
                                <input type="text" class="form-control" id="patientName" name="patientName" required>
                            </div>
                            <div class="mb-3">
                                <label for="patientPhone" class="form-label">联系电话</label>
                                <input type="tel" class="form-control" id="patientPhone" name="patientPhone" required>
                            </div>
                            <div class="mb-3">
                                <label for="departmentId" class="form-label">就诊科室</label>
                                <select class="form-select" id="departmentId" name="departmentId" required>
                                    <option value="">请选择科室</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="doctorId" class="form-label">就诊医生</label>
                                <select class="form-select" id="doctorId" name="doctorId" required>
                                    <option value="">请先选择科室</option>
                                </select>
                            </div>
                            <button type="submit" class="btn btn-primary">立即排队</button>
                        </form>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <!-- 当前排队信息 -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">当前排队信息</h5>
                    </div>
                    <div class="card-body">
                        <div id="queueStatus">
                            <p class="text-muted">请选择医生查看排队状态</p>
                        </div>
                    </div>
                </div>

                <!-- 今日排队统计 -->
                <div class="card mt-3">
                    <div class="card-header">
                        <h5 class="card-title mb-0">今日排队统计</h5>
                    </div>
                    <div class="card-body">
                        <div id="todayStats">
                            <div class="row text-center">
                                <div class="col-4">
                                    <h4 class="text-primary" id="totalQueue">0</h4>
                                    <small>总排队</small>
                                </div>
                                <div class="col-4">
                                    <h4 class="text-warning" id="waitingQueue">0</h4>
                                    <small>等待中</small>
                                </div>
                                <div class="col-4">
                                    <h4 class="text-success" id="completedQueue">0</h4>
                                    <small>已完成</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 实时排队显示 -->
        <div class="row mt-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">实时排队状态</h5>
                    </div>
                    <div class="card-body">
                        <div id="realTimeQueue">
                            <!-- 实时排队信息将在这里显示 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 排队成功提示模态框 -->
    <div class="modal fade" id="queueSuccessModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">排队成功</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>您的排队号码：<span id="queueNumber" class="fw-bold text-primary"></span></p>
                    <p>请留意叫号信息，保持电话畅通。</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">确定</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/js/bootstrap.bundle.min.js"></script>
    <script>
        $(document).ready(function() {
            const queueSuccessModal = new bootstrap.Modal(document.getElementById('queueSuccessModal'));
            
            // 加载科室列表
            function loadDepartments() {
                // 模拟数据，因为后端API可能还没完全配置好
                const departments = [
                    {id: 1, name: "内科", description: "内科疾病诊疗"},
                    {id: 2, name: "外科", description: "外科手术治疗"},
                    {id: 3, name: "妇产科", description: "妇科产科诊疗"},
                    {id: 4, name: "儿科", description: "儿童疾病诊疗"}
                ];
                
                let options = '<option value="">请选择科室</option>';
                departments.forEach(function(dept) {
                    options += `<option value="${dept.id}">${dept.name}</option>`;
                });
                $('#departmentId').html(options);
                
                // 尝试从API加载真实数据
                $.get('api/departments').done(function(data) {
                    let options = '<option value="">请选择科室</option>';
                    data.forEach(function(dept) {
                        options += `<option value="${dept.id}">${dept.name}</option>`;
                    });
                    $('#departmentId').html(options);
                }).fail(function() {
                    console.log('使用模拟科室数据');
                });
            }

            // 加载医生列表
            $('#departmentId').change(function() {
                const deptId = $(this).val();
                if (deptId) {
                    // 模拟医生数据
                    const doctors = {
                        1: [{id: 1, name: "张医生", title: "主任医师"}, {id: 2, name: "李医生", title: "副主任医师"}],
                        2: [{id: 3, name: "王医生", title: "主任医师"}, {id: 4, name: "刘医生", title: "主治医师"}],
                        3: [{id: 5, name: "陈医生", title: "主任医师"}],
                        4: [{id: 6, name: "赵医生", title: "副主任医师"}]
                    };
                    
                    let options = '<option value="">请选择医生</option>';
                    if (doctors[deptId]) {
                        doctors[deptId].forEach(function(doctor) {
                            options += `<option value="${doctor.id}">${doctor.name} - ${doctor.title}</option>`;
                        });
                    }
                    $('#doctorId').html(options);
                    
                    // 尝试从API加载真实数据
                    $.get(`api/doctors?departmentId=${deptId}`).done(function(data) {
                        let options = '<option value="">请选择医生</option>';
                        data.forEach(function(doctor) {
                            options += `<option value="${doctor.id}">${doctor.name} - ${doctor.title}</option>`;
                        });
                        $('#doctorId').html(options);
                    }).fail(function() {
                        console.log('使用模拟医生数据');
                    });
                } else {
                    $('#doctorId').html('<option value="">请先选择科室</option>');
                }
            });

            // 更新排队状态
            function updateQueueStatus() {
                const doctorId = $('#doctorId').val();
                if (doctorId) {
                    // 模拟排队状态
                    const mockStatus = {
                        current: "A001 - 王小红",
                        waiting: Math.floor(Math.random() * 10) + 1,
                        estimatedWait: Math.floor(Math.random() * 60) + 10
                    };
                    
                    let html = `
                        <p><strong>当前就诊：</strong>${mockStatus.current || '暂无'}</p>
                        <p><strong>等待人数：</strong>${mockStatus.waiting || 0}人</p>
                        <p><strong>预计等待时间：</strong>${mockStatus.estimatedWait || 0}分钟</p>
                    `;
                    $('#queueStatus').html(html);
                    
                    // 尝试从API获取真实数据
                    $.get(`api/queue/current/${doctorId}`).done(function(data) {
                        let html = `
                            <p><strong>当前就诊：</strong>${data.current ? data.current.queueNumber + ' - ' + data.current.patientName : '暂无'}</p>
                            <p><strong>等待人数：</strong>${data.waiting || 0}人</p>
                            <p><strong>预计等待时间：</strong>${data.estimatedWait || 0}分钟</p>
                        `;
                        $('#queueStatus').html(html);
                    }).fail(function() {
                        console.log('使用模拟排队状态');
                    });
                }
            }

            // 医生选择变化时更新状态
            $('#doctorId').change(updateQueueStatus);

            // 提交排队表单
            $('#queueForm').submit(function(e) {
                e.preventDefault();
                
                const formData = {
                    patientName: $('#patientName').val(),
                    patientPhone: $('#patientPhone').val(),
                    departmentId: $('#departmentId').val(),
                    doctorId: $('#doctorId').val()
                };

                // 生成模拟排队号码
                const deptCode = ['', 'A', 'B', 'C', 'D'][formData.departmentId];
                const queueNum = deptCode + String(Math.floor(Math.random() * 900) + 100).padStart(3, '0');
                
                // 显示成功模态框
                $('#queueNumber').text(queueNum);
                queueSuccessModal.show();
                
                // 清空表单
                this.reset();
                $('#doctorId').html('<option value="">请先选择科室</option>');
                $('#queueStatus').html('<p class="text-muted">请选择医生查看排队状态</p>');
                
                // 尝试提交到后端API
                $.post('queue', formData).done(function(response) {
                    if (response.success) {
                        $('#queueNumber').text(response.queueNumber);
                    }
                }).fail(function() {
                    console.log('使用模拟排队号码');
                });
                
                // 更新统计数据
                updateStats();
            });

            // 更新统计数据
            function updateStats() {
                $('#totalQueue').text(Math.floor(Math.random() * 50) + 20);
                $('#waitingQueue').text(Math.floor(Math.random() * 15) + 5);
                $('#completedQueue').text(Math.floor(Math.random() * 30) + 10);
            }

            // 更新实时排队显示
            function updateRealTimeQueue() {
                const mockQueue = [
                    {queueNumber: 'A002', patientName: '王小红', status: 'waiting', waitTime: 15},
                    {queueNumber: 'A003', patientName: '张大伟', status: 'waiting', waitTime: 25},
                    {queueNumber: 'A004', patientName: '刘小芳', status: 'waiting', waitTime: 35},
                    {queueNumber: 'A005', patientName: '陈小军', status: 'waiting', waitTime: 45},
                    {queueNumber: 'A006', patientName: '赵小丽', status: 'waiting', waitTime: 5}
                ];
                
                let html = '';
                mockQueue.forEach(function(item, index) {
                    const statusClass = item.status === 'waiting' ? 'status-waiting' : 
                                       item.status === 'calling' ? 'status-calling' : 'status-completed';
                    const statusText = item.status === 'waiting' ? '等待' : 
                                      item.status === 'calling' ? '就诊中' : '已完成';
                    
                    html += `
                        <div class="d-flex justify-content-between align-items-center p-3 border-bottom">
                            <div>
                                <h6 class="mb-1">${item.queueNumber} - ${item.patientName}</h6>
                                <small class="text-muted">📞 139****1234 | ⏰ 等待 ${item.waitTime}分钟</small>
                            </div>
                            <div class="text-end">
                                <span class="badge bg-secondary">第${index + 3}位</span>
                            </div>
                        </div>
                    `;
                });
                
                $('#realTimeQueue').html(html);
            }

            // 初始化
            loadDepartments();
            updateStats();
            updateRealTimeQueue();
            
            // 定时更新数据
            setInterval(function() {
                updateStats();
                updateRealTimeQueue();
                if ($('#doctorId').val()) {
                    updateQueueStatus();
                }
            }, 30000); // 每30秒更新一次
        });
    </script>
</body>
</html>